.contain {
    flex-direction: column;

    .contain-toolle {
        width: calc(100% - 0.5rem);
        margin: 0.2rem 0.25rem;
        height: calc(100% - .2rem);
    }
}


.index-title {
    width: 100%;
    height: 0.39rem;
    background:
        url(../img/index/title.png) no-repeat;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.16rem;
    color: rgba(223, 238, 243, 1);
    text-indent: 0.5rem;
    margin-top: 0.1rem;
}

.toolle-top {
    width: 100%;
    height: 62%;
    display: flex;

    .top-left {
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .left-number {
            height: 26%;
            width: 100%;
            display: flex;
            justify-content: space-between;

            .number-item {
                height: 100%;
                width: 32%;
                background-size: 99% 99%;
                background-position: center;
                background-repeat: no-repeat;
                position: relative;
                display: flex;
                justify-content: center;
                flex-direction: column;
                padding-left: 0.6rem;
                color: #B3DBD5;

                span {
                    font-size: 0.26rem;
                    color: #4DFFE5;
                    margin-bottom: 0.15rem;
                }

            }


            .number-item:nth-child(1) {
                background-image: url(../img/p1.png);
            }

            .number-item:nth-child(3) {
                background-image: url(../img/p2.png);
            }

            .number-item:nth-child(2) {
                background-image: url(../img/p3.png);
            }
        }

        .left-chart {
            height: 70%;
            width: 100%;
            display: flex;
        }

    }

}


.toolle-bottom {
    width: 100%;
    height: 35%;
    display: flex;
    justify-content: space-between;


}


.toolle-bottom>div {
    height: 100%;
}

.toolle-bottom>div:nth-child(1) {
    width: 28%;
}

.toolle-bottom>div:nth-child(2) {
    width: 23%;
}

.toolle-bottom>div:nth-child(3) {
    width: 26%;
}

.toolle-bottom>div:nth-child(4) {
    width: 19%;
}

.person-title {
    width: 28%;
    height: 100%;
}

.person-post {
    width: 70%;
    height: 100%;
    margin-left: 2%;
}

#title-chart,
#marital-status,
#politicalstatus-chart {
    width: 100%;
    height: calc(100% - 0.4rem);
}

#marital-status>ul {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

#marital-status>ul>li {

    margin-left: 0.5rem;
    letter-spacing: 1px;
}

#marital-status>ul>li::before {
    content: '';
    width: 0.1rem;
    height: 0.1rem;
    display: inline-block;
    margin-right: 0.18rem;
    border-radius: 50%;
    background-color: #4DFFE5;
}

#marital-status>ul>li:nth-child(1)::before {
    background-color: #59DFA9;
}

#marital-status>ul>li:nth-child(2)::before {
    background-color: #FAFFB2;
}

#marital-status>ul>li:nth-child(3)::before {
    background-color: #528FFF;
}

.house-box {
    width: 100%;
    height: calc(100% - 0.4rem);
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

.house-item {
    width: 1.52rem;
    height: 1.86rem;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    font-size: 0.24rem;
    text-align: center;
    padding-top: 0.36rem;
    cursor: pointer;
}

#house-has {
    background-image: url(../img/pb1.png);
}

#house-no {
    background-image: url(../img/pb2.png);
}

#house-loan {
    background-image: url(../img/pb3.png);
}

.post-con {
    width: 100%;
    height: calc(100% - 0.4rem);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.post-item {
    width: 21%;
    height: 50%;
    display: flex;
    align-items: center;
    margin-left: 4%;

    img {
        width: 0.68rem;
        height: 0.68rem;
        margin-right: 0.06rem;
    }

    .post-num {
        width: 1.4rem;
        font-size: 0.24rem;
        line-height: 0.34rem;
        height: 0.34rem;
        background: linear-gradient(227.34deg, rgba(55, 120, 133, 1) 0%, rgba(68, 153, 130, 0.1) 99.92%);
        text-indent: 0.15rem;
    }
}

.post-item>div {
    height: 0.68rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-indent: 0.1rem;
    cursor: pointer;
}


#marital-number {
    padding: 0 0.1rem;
    font-style: italic;
    color: #b7ff18;
    cursor: pointer;
}

#vacation-number {
    padding: 0 0.1rem 0 0;
    font-style: italic;
    color: #35d9ff;
    cursor: pointer;
}


.layui-table-view::after {
    background-color: transparent;
}
.layui-table-header {
    background:
  #318E93;
  }